<template>
	<div ref="chartContainer" style="width: 100%;height: 100%;">
		<el-carousel
			indicator-position="none"
			:height="`${height}px`"
			:interval="6000"
		>
			<el-carousel-item
				v-for="(processItem, processIndex) in chartData"
				:key="processIndex"
			>
				<div class="flex-center" style="flex-direction: column;font-weight: 500;color: #c5c8ce;font-size: 14px;padding: 4px 0;">
					<div>{{ processItem.processName || '工序' }}({{ processItem.openMachineNum }}台)</div>
					<div class="flex-center" style="font-size: 14px;">
						<!--<div class="margin-right-10">开台数: {{ processItem.totalMachineNum }}/{{ processItem.openMachineNum }}</div>-->
					</div>
				</div>
				<chart
					:workshop-id="workshopId"
					:process-code="processCode"
					:chart-data="processItem.machineList"
				></chart>
			</el-carousel-item>
		</el-carousel>
	</div>
</template>

<script>

    import { productionPrdReportProcessRealTimeData } from '../../../../../../api/production/kanBan';
    import chart from './chart';
    export default {
        name: 'CurrentScheduleShiftProcessMachineYieldEnergy',
        components: {
            chart
        },
        props: {
            refreshData: {
                type: [Number, String],
                default: ''
            },
            workshopId: {
                type: Number,
                default: null
            },
            processCode: {
                type: String,
                default: 'XS'
            }
        },
        data() {
            return {
                height: 0,
                chartData: []
            };
        },
        methods: {
            getDataRequest() {
                if (!this.workshopId) return false;
                return productionPrdReportProcessRealTimeData({}).then(res => {
                    if (res.data.status === 200) {
                        this.chartData = res.data.res ? res.data.res : [];
                    }
                });
            },
            getHeight() {
                this.$nextTick(() => {
                    this.height = this.$refs.chartContainer.offsetHeight;
                });
            },
            resize() {
                window.addEventListener('resize', this.getHeight, false);
            }
        },
        watch: {
            refreshData: {
                handler() {
                    this.getHeight();
                    this.getDataRequest();
                },
                deep: true,
                immediate: true
            }
        },
        mounted() {
            this.resize();
        },
        destroyed() {
            window.removeEventListener('resize', this.getHeight, false);
        }
    };
</script>

<style scoped lang="scss"></style>
